<template>

  <div>
    floatDemo
  </div>
<div class="container">
  容器
  <div class="box1">BOX1</div>
  <div class="box2">BOX2</div>
  <div class="box3">BOX3</div>
</div>
</template>
<script setup>
</script>

<style scoped lang="scss">
// 三个子盒子由于都浮动了，造成木盒子container高度坍塌
//主要原因都是浮动了，3个盒子已经不在这个container里面
//如果有一个box1没有浮动，那么这个container的高度就是等于box1的高度（container
// 没有定义高度前提下）

.container {
  background-color: bisque;
  height: 400px;
}
.box1{
  width: 300PX;
  height: 300px;
  background-color: red;
  float: right;
}
.box2{
  width: 400PX;
  height: 300px;
  background-color: green;
  float: right;
}
.box3{
  width: 500PX;
  height: 300px;
  background-color: blue;
  float: right;
}

div {
  color:whitesmoke;
}
</style>